import * as React from 'react'
import './header.css'
import { useState,useEffect } from 'react'
import { useNavigate,useLocation   } from 'react-router-dom';
import logoPng from '../assets/logo_.png'
import moneyPng from '../assets/logo_.png'
import userPng from "../assets/icons/user.png"

function Header() {
  const navigateTo  = useNavigate();
  const location = useLocation(); 
  const [isUserPage, setIsUserPage] = useState(false);  
  const goIndex=()=>{
    navigateTo('/')
  }
   // hook API
   useEffect(() => {  
    // 组件挂载后执行的函数  
    console.log(location.pathname);
    setIsUserPage(location.pathname=== '/user')
  }, []); // 传入空数组以确保只在组件首次渲染后执行 
  

  const goUser = () => {
    navigateTo('/user')
  };
  // const checkIfUserPage = () => {
  //   isUserPage.value = route.path === '/user'
  // };
  return (
    <div className="custom-navbar">
		<img src={logoPng} className="logo" onClick={goIndex}></img>

		<div className="title">AON 3D Clothing</div>
		<div className="right">
			<div className="right_count">
				<img src={moneyPng} className="moneyIcon"></img>
				<span className="count">120</span>
			</div>
      {
        isUserPage?(<img src={userPng} v-if="!isUserPage" className="userIcon" onClick={goUser}></img>)
        :<div></div>
      }
		</div>
	</div>
  );
}

export default Header;
